<script>
export default {
  name: "gourmet",
  props: {
    data: {
      default: () => ({}),
    },
  },
  methods: {
    handleClick() {
      this.$emit("click", this.data.Id);
    },
  },
};
</script>

<template>
  <view class="gourmet-item" @click="handleClick">
    <!-- 商品图片 -->
    <image class="gourmet-image" :src="data.Img" mode="aspectFill"></image>

    <!-- 商品信息 -->
    <view class="gourmet-info">
      <!-- 商品名称 -->
     <view class="gourmet-top">
      <view class="gourmet-name">{{ data.Name }}</view>
      <view class="gourmet-tabs" v-if="data.Tags">{{ data.Tags }}</view>
     </view>

      <!-- 价格和销量 -->
      <view class="gourmet-bottom">
        <view class="gourmet-price">
          <text class="price-symbol">¥</text>
          <text class="price-value">{{ data.ShowPrice || "-" }}</text>
          <!--          <text class="market-price" v-if="data.MarketPrice">¥{{data.MarketPrice}}</text>-->
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.gourmet-item {
  position: relative;
  display: flex;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  min-height: 240rpx;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  // 商品图片
  .gourmet-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    flex-shrink: 0;
  }

  // 商品信息区域
  .gourmet-info {
    padding: 16rpx 20rpx;
	min-height: 240rpx;
    .gourmet-top{
      min-height: 130rpx;
    }
  }

  // 商品名称
  .gourmet-name {
    font-size: 30rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 10rpx;
    overflow: hidden;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .gourmet-tabs{
    font-size: 26rpx;
    color: #666;
    font-weight: 500;
    margin-bottom: 10rpx;
    overflow: hidden;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  // 底部价格和销量区域
  .gourmet-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  // 价格
  .gourmet-price {
    display: flex;
    align-items: baseline;

    .price-symbol {
      font-size: 24rpx;
      color: #ff5c38;
      font-weight: 500;
    }

    .price-value {
      font-size: 34rpx;
      font-weight: 600;
      color: #ff5c38;
    }

    .market-price {
      font-size: 22rpx;
      color: #999;
      text-decoration: line-through;
      margin-left: 8rpx;
    }
  }

  // 销量
  .gourmet-sales {
    font-size: 22rpx;
    color: #999;
  }
}
</style>